@charset "UTF-8";
//===========-常见样式-===========
.db {
    display: block!important;
    width: 100%;
}

.di {
    display: inline!important;
}

.dib {
    display: inline-block!important;
}

.fz0 {
    font-size: 0;
    overflow: hidden;
}

.hr {
    margin: 0;
    border: none;
    height: 1px;
    overflow: hidden;
    background-color: $border-color;
}

//垂直居中
.di-vm {
    display: inline-block;
    vertical-align: middle;
}
//-------边框 begin--------
.bn{
    border: none!important;
}
.bd{
    border: 1px solid $border-color;
}
.bt {
    border-top: 1px solid $border-color;
}

.br {
    border-right: 1px solid $border-color;
}

.bb {
    border-bottom: 1px solid $border-color;
}

.bl {
    border-left: 1px solid $border-color;
}
//-------边框 end--------

//-------浮动 begin-------
.fl {
    float: left;
}

.fr {
    float: right;
}

.fn{
    float: none
}

.clear:after {
    content: "";
    display: block;
    clear: both;
}
//-------浮动 end--------
.cell {
    display: table-cell;
    vertical-align: middle;
}

//-------常见字号 begin-------
.fz20 {
    font-size: r(20);
}
.fz24 {
    font-size: r(24);
}
.fz26 {
    font-size: r(26);
}
.fz28 {
    font-size: r(28);
}
.fz30 {
    font-size: r(30);
}
.fz32 {
    font-size: r(32);
}
.fz34 {
    font-size: r(34);
}
.fz36 {
    font-size: r(36);
}
.fz38 {
    font-size: r(38);
}
.fz40 {
    font-size: r(40);
}
.fz42 {
    font-size: r(42);
}
.fz44 {
    font-size: r(44);
}
.fw-b{
    font-weight: bold
}
.fw-d{
    font-weight:600;
}
.fw-l{
    font-weight:lighter;
}
//-------常见字号 end-------

//-------常见外间距 begin-------
.m10{
    margin: r(10);
}
.m20{
    margin: r(20);
}
.m30{
    margin: r(30);
}
.m40{
    margin: r(40);
}
.mt10 {
    margin-top: r(10);
}
.mt20 {
    margin-top: r(20);
}
.mt30 {
    margin-top: r(30);
}
.mt40 {
    margin-top: r(40);
}
.mr10 {
    margin-right: r(10);
}
.mr20 {
    margin-right: r(20);
}
.mr30 {
    margin-right: r(30);
}
.mr40 {
    margin-right: r(40);
}
.mb10 {
    margin-bottom: r(10);
}
.mb20 {
    margin-bottom: r(20);
}
.mb30 {
    margin-bottom: r(30);
}
.mb40 {
    margin-bottom: r(40);
}
.ml10 {
    margin-left: r(10);
}
.ml20 {
    margin-left: r(20);
}
.ml30 {
    margin-left: r(30);
}
.ml40 {
    margin-left: r(40);
}
//-------常见外间距 end-------

//-------常见内间距 begin-------
.p10{
    padding: r(10)!important
}
.p20{
    padding: r(20)!important
}
.p30{
    padding: r(30)!important
}
.p40{
    padding: r(40)!important
}
.pt0{
    padding-top: 0!important;
}
.pr0{
    padding-right: 0!important;
}
.pb0{
    padding-bottom: 0!important;
}
.pl0{
    padding-left: 0!important;
}
.pt10{
    padding-top: r(10)!important
}
.pt20{
    padding-top: r(20)!important
}
.pt30{
    padding-top: r(30)!important
}
.pt40{
    padding-top: r(40)!important
}
.pr10{
    padding-right: r(10)!important
}
.pr20{
    padding-right: r(20)!important
}
.pr30{
    padding-right: r(30)!important
}
.pr40{
    padding-right: r(40)!important
}
.pb10{
    padding-bottom: r(10)!important
}
.pb20{
    padding-bottom: r(20)!important
}
.pb30{
    padding-bottom: r(30)!important
}
.pb40{
    padding-bottom: r(40)!important
}
.pl10{
    padding-left: r(10)!important
}
.pl20{
    padding-left: r(20)!important
}
.pl30{
    padding-left: r(30)!important
}
.pl40{
    padding-left: r(40)!important
}
//-------常见内间距 end-------

//-----文字对齐方式 begin------
.tx-c {
    text-align: center;
}

.tx-l {
    text-align: left;
}

.tx-r {
    text-align: right;
}
//-----文字对齐方式 end--------

//-----文字排版 begin--------
.h1{
    font-size: r(34);
    color: $font-color-main;
}
.h2{
    font-size: r(30);
    color: $font-color-main;
}
.h3{
    font-size: r(28);
    color: $font-color-main;
}
.h4{
    font-size: r(26);
    color: $font-color-main;
}
.h5{
    font-size: r(24);
    color: $font-color-main;
}
.h6{
    font-size: r(32);
    color: $font-color-main;
}
//-----文字排版 end--------

//-----常见背景 begin-------
.bgff{
    background: #fff;
}
.bgfb{
    background: #fbfbfb;
}
.bgf5{
    background: #f5f5f5;
}
.bgf0{
    background: #f0f0f0;
}
//-----常见背景 end-------
/*正圆*/
.round{
    border-radius:r(1000)
}
//----常见尺寸 begin-------
//小
.size-s{
    width: r(80);
    height: r(80);
    line-height: r(80);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
//中
.size-m{
    width: r(120);
    height: r(120);
    line-height: r(120);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
//默认
.size{
    width: r(160);
    height: r(160);
    line-height: r(160);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
//大
.size-b{
    width: r(200);
    height: r(200);
    line-height: r(200);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
//----常见尺寸 begin-------


//图片盒子
.img-wrap{
    img{
        width: 100%;
        height: auto;
        display: block;
    }   
}